<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.alibaba.fastjson.JSON" %>
<html>
<head>
    <title>新增配送</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="container mt-4">
    <h2>新增配送</h2>
    <form method="post" action="/delivery/add" @submit.prevent="checkForm">
        <input type="hidden" name="orderId" v-model="delivery.orderId">
        <div class="form-group">
            <label>配送状态</label>
            <input type="text" class="form-control" v-model="delivery.deliveryStatus" required>
        </div>
        <div class="form-group">
            <label>配送时间</label>
            <input type="datetime-local" class="form-control" v-model="delivery.deliveryTime">
        </div>
        <div class="form-group">
            <label>收货地址</label>
            <input type="text" class="form-control" v-model="delivery.address" required>
        </div>
        <button type="submit" class="btn btn-primary">保存</button>
        <a :href="'/delivery/list/' + delivery.orderId" class="btn btn-secondary ml-2">返回</a>
    </form>
    <div v-if="error" class="alert alert-danger mt-2">{{error}}</div>
</div>
<script>
    var orderIdData = '<%= request.getAttribute("orderId") == null ? "0" : request.getAttribute("orderId") %>';
    new Vue({
        el: '#app',
        data: {
            delivery: {orderId: orderIdData, deliveryStatus: '', deliveryTime: '', address: ''},
            error: ''
        },
        methods: {
            checkForm: function() {
                if (!this.delivery.deliveryStatus) {
                    this.error = '配送状态不能为空';
                    return;
                }
                if (!this.delivery.address) {
                    this.error = '收货地址不能为空';
                    return;
                }
                this.$el.querySelector('form').submit();
            }
        }
    });
</script>
</body>
</html> 